{% extends "layouts/examples.njk" %}

{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}

{% block beforeContent %}
  {{ govukBackLink({
    href: "/"
  }) }}
{% endblock %}

{% block content %}
  <h1 class="govuk-heading-l">JavaScript errors</h1>
  <p class="govuk-body-lead">
    Open your <a class="govuk-link" href="https://developer.mozilla.org/en-US/docs/Web/API/console#see_also">brower's console</a>
    to witness the error thrown in browsers where GOV.UK Frontend is not supported.
  </p>
  {{ govukCharacterCount({
    label: {
      text: "Any other comment"
    },
    id: "some-content",
    name: "some-content"
  })}}
{% endblock %}

{% block bodyEnd %}
  <script type="module" src="/javascripts/govuk-frontend.min.js"></script>

  <!-- SupportError -->
  <script type="module">
    // Calling `initAll` would result in errors being logged rather than thrown
    import { CharacterCount } from '/javascripts/govuk-frontend.min.js'

    // Simulate GOV.UK Frontend not being supported
    document.body.classList.remove('govuk-frontend-supported')

    const $element = document.querySelector('[data-module="govuk-character-count"]')

    try {
      // Instantiate the component directly so errors are thrown
      new CharacterCount($element)
      // Use `finally` to ensure we tidy up regardless of the error
    } finally {
      // Add back the class marking GOV.UK Frontend support for future examples
      document.body.classList.add('govuk-frontend-supported')
    }
  </script>

  <!--
    Add examples of other types of errors in their own `<script>` tag.
    This separates each error example, as well as isolate their code
    from the errors thrown by the other `<script>` tags.
  -->
{% endblock %}
